 <template>
  <div class="home">
    <transition enter-active-class="animate__animated animate__fadeInRight">
       <Repair v-if="$store.state.page==4"/>       
    </transition>
    <transition enter-active-class="animate__animated animate__fadeInLeft">
       <Passenger  v-if="$store.state.page==2" />
    </transition>
    <transition enter-active-class="animate__animated animate__fadeInDown">
       <Freight  v-if="$store.state.page==3" />
    </transition>
    <transition enter-active-class="animate__animated animate__fadeInRight">
       <All v-if="$store.state.page==1" :class="$store.state.pifu==true?'whiteSkin':''"/>
    </transition>
    <transition enter-active-class="animate__animated animate__zoomInUp">
       <All v-if="$store.state.page==5" />
    </transition>
     <transition enter-active-class="animate__animated animate__fadeInDown">
       <Freight  v-if="$store.state.page==6" />
    </transition>
  </div>
</template>

<script>
import types from "@/store/constants/types";
import Repair from "@/views/repair";
import Passenger from "@/views/passenger";
import Freight from "@/views/freight";
import All from "@/views/all";
import ns from "@/store/constants/ns";
import { mapState } from "vuex";

const nameSpaced = ns.HOME + "/";
export default {
  name: "Home",
  components: {
    Repair,
    Passenger,
    All,
    Freight
  },
  computed: {
    ...mapState(nameSpaced, {
      inventoryContrast: (state) => state.inventoryContrast, //车辆超载
      pickRank: (state) => state.pickRank, //各区预警处置情况
      originRegion: (state) => state.originRegion, //各区任务执行
      fertQuantity: (state) => state.fertQuantity, //各区电子运单上传情况
      outboundInventory: (state) => state.outboundInventory, //运单日均称重重量
      plantDistribute: (state) => state.plantDistribute, //市企业分布情况
    }),
  },
  data() {
    return {
      stationId: "",
      areaCode: "",
      reqData: null,
      InterVal: null,
      region: "", //当前数据所在的区域
      videoBig: false,
      currentNav: 0,
    };
  },
  mounted() {
    this.InterVal = setInterval(() => {
      let obj = Object.assign({ timer: true }, this.reqData);
      this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, obj);
    }, 20000);
  },
  destroyed() {
    this.InterVal ? clearInterval(this.InterVal) : null;
  },
  methods: {
    getData(data) {
      this.reqData = data;
      this.region = data.name;

      this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, data);
    },
    //选择企业
    SelectCompany(obj) {
      this.reqData = obj;
      this.title = `(${obj.name})`;

      this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, obj);
    },
    //选择企业性质
    selectType(index) {
      this.currentNav = index;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/views/home/home.scss";
.index-pie{
  width:100%;
  height:100%;
}
</style>